<template>
    <div>
        <el-table @cell-click="handleCellClick" size="large" :data="tableData" style="width:100%">
            <el-table-column align="center" label="产品名称" prop="name">
            </el-table-column>
            <el-table-column align="center" label="服务项目">
                <el-table-column align="center" label="信息服务">
                    <el-table-column  align="center" label="信息推送服务">
                        <el-table-column align="center" label="短信订阅" prop="msgSubscribe"/>
                        <el-table-column align="center" label="短信推送" prop="msgPush"/>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="客服服务">
                    <el-table-column align="center" label="专属服务">
                        <el-table-column align="center" label="专属人工客服" prop="kefu"/>
                        <el-table-column align="center" label="电脑远程服务" prop="remote"/>
                    </el-table-column>
                </el-table-column>
                <el-table-column align="center" label="增值服务">
                    <el-table-column align="center" label="数字证书服务">
                        <el-table-column align="center" label="证书办理" prop="certificate"/>
                    </el-table-column>
                    <el-table-column align="center" label="商业信息服务">
                        <el-table-column align="center" label="信用信息报告" prop="creditReport"/>
                        <el-table-column align="center" label="咨询评估报告" prop="evaluateReport"/>
                    </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column label="备注" prop="tip">
            </el-table-column>
        </el-table>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData:[
                    {
                        name:'VIP1\n4999元/年\n<<立即购买>>',
                        msgSubscribe:'X',
                        msgPush:'√',
                        kefu:'√',
                        remote:12,
                        certificate:'√',
                        creditReport:'X',
                        evaluateReport:'√',
                        tip:'该项目包含信息服务、客服服务、增值服务，请仔细阅读提供的服务是否是您需要的。'
                    },
                    {
                        name:'VIP2\n5999元/年\n<<立即购买>>',
                        msgSubscribe:'X',
                        msgPush:'√',
                        kefu:'√',
                        remote:18,
                        certificate:'√',
                        creditReport:'X',
                        evaluateReport:'√',
                        tip:'该项目包含信息服务、客服服务、增值服务，请仔细阅读提供的服务是否是您需要的。'
                    },
                    {
                        name:'VIP3\n6999元/年\n<<立即购买>>',
                        msgSubscribe:'√',
                        msgPush:'√',
                        kefu:'√',
                        remote:24,
                        certificate:'√',
                        creditReport:'√',
                        evaluateReport:'√',
                        tip:'该项目包含信息服务、客服服务、增值服务，请仔细阅读提供的服务是否是您需要的。'
                    }
                ]
            }
        },
        methods: {
            handleCellClick(row, column, cell, event){
                this.$router.push({path:'/vip/buy'})
            }
        },
    }
</script>

<style>

.el-table .cell{
    white-space: pre-wrap;
    cursor: pointer;
}

</style>